<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head
	th:replace="mall/header::head-fragment('NewBee商城-订单结算','order-detail')">
<link rel="icon" th:href="@{/static/favicon.ico}" type="image/x-icon" />
</head>
<link th:href="@{/mall/css/bootstrap-modal.css}" rel="stylesheet">
<body>
	<header th:replace="mall/header::header-fragment"></header>
	<!-- nav -->
	<nav th:replace="mall/header::nav-fragment"></nav>

	<!-- personal -->
	<div id="personal">
		<div class="self-info center">

			<!-- sidebar -->
			<div th:replace="mall/personal-sidebar::sidebar-fragment"></div>

			<div class="intro fr">
				<div class="uc-box uc-main-box">
					<div class="uc-content-box order-view-box">
						<div class="box-hd">
							<h1 class="title">填写并核对订单信息</h1>
							<div class="more clearfix">
								<div class="actions">
									<a id="saveOrder" class="btn btn-small btn-primary"
										title="提交订单">提交订单</a>
								</div>
							</div>
						</div>
						<div class="box-bd">
							<div class="uc-order-item uc-order-item-pay">
								<div class="order-detail">

									<div class="order-summary">
										<div class="order-progress">
											<ol class="progress-list clearfix progress-list-5">
												<li class="step step-done">
													<div class="progress">
														<span class="text">购物车</span>
													</div>
													<div class="info"></div>
												</li>
												<li class="step step-active">
													<div class="progress">
														<span class="text">下单</span>
													</div>
													<div class="info"></div>
												</li>
												<li class="step">
													<div class="progress">
														<span class="text">付款</span>
													</div>
													<div class="info"></div>
												</li>
												<li class="step">
													<div class="progress">
														<span class="text">出库</span>
													</div>
													<div class="info"></div>
												</li>
												<li class="step">
													<div class="progress">
														<span class="text">交易成功</span>
													</div>
													<div class="info"></div>
												</li>
											</ol>
										</div>
									</div>
									<table class="order-items-table">
										<tbody>

											<th:block th:each="item : ${myShoppingCartItems}">
												<tr>
													<td class="col col-thumb">
														<div class="figure figure-thumb">
															<a target="_blank"
																th:href="@{'/goods/detail/'+${item.goodsId}}"> <img
																th:src="@{${item.goodsCoverImg}}" width="80" height="80"
																alt="">
															</a>
														</div>
													</td>
													<td class="col col-name">
														<p class="name">
															<a target="_blank"
																th:href="@{'/goods/detail/'+${item.goodsId}}"
																th:text="${item.goodsName}">newbee</a>
														</p>
													</td>
													<td class="col col-price"><p class="price"
															th:text="${item.sellingPrice+'元 x '+item.goodsCount}">
															1299元 × 1</p></td>
													<td class="col col-actions"></td>
												</tr>
											</th:block>
										</tbody>
									</table>
								</div>
								<div id="editAddr" class="order-detail-info">
									<h3>收货信息</h3>
									<table class="info-table">
										<tbody>
											<tr>
												<th>收货地址：</th>
												<td class="user_address_label"
													th:text="${session.newBeeMallUser.address==''?'无':session.newBeeMallUser.address}">
													newbee</td>
											</tr>
										</tbody>
									</table>
									<div class="actions">
										<a class="btn btn-small btn-line-gray J_editAddr"
											href="javascript:openUpdateModal();">修改</a>
									</div>
								</div>
								<div id="editTime" class="order-detail-info">
									<h3>支付方式</h3>
									<table class="info-table">
										<tbody>
											<tr>
												<th>支付方式：</th>
												<td>在线支付</td>
											</tr>
										</tbody>
									</table>
									<div class="actions"></div>
								</div>
								<div class="order-detail-total">
									<table class="total-table">
										<tbody>
											<tr>
												<th>商品总价：</th>
												<td><span class="num" th:text="${priceTotal+'.00'}">1299.00</span>元</td>
											</tr>
											<tr>
												<th>运费：</th>
												<td><span class="num">0</span>元</td>
											</tr>
											<tr>
												<th class="total">应付金额：</th>
												<td class="total"><span class="num"
													th:text="${priceTotal+'.00'}">1299.00</span>元</td>
											</tr>
										</tbody>
									</table>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="modal fade" id="personalInfoModal" tabindex="-1"
				role="dialog" aria-labelledby="personalInfoModalLabel">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal"
								aria-label="Close">
								<span aria-hidden="true">&times;</span>
							</button>
							<h6 class="modal-title" id="personalInfoModalLabel">地址修改</h6>
						</div>
						<div class="modal-body">
							<form id="personalInfoForm">
								<div class="form-group">
									<input type="hidden" id="userId"
										th:value="${session.newBeeMallUser.userId}"> <label
										for="address" class="control-label">收货地址:</label> <input
										type="text" class="form-control" id="address" name="address"
										placeholder="请输入收货地址"
										th:value="${session.newBeeMallUser.address}" required="true">
								</div>
							</form>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default"
								data-dismiss="modal">取消</button>
							<button type="button" class="btn btn-primary" id="saveButton">确认</button>
						</div>
					</div>
				</div>
			</div>
			<div class="clear"></div>
		</div>
	</div>


	<div th:replace="mall/footer::footer-fragment"></div>

	<!-- jQuery -->
	<script th:src="@{/admin/plugins/jquery/jquery.min.js}"></script>
	<script th:src="@{/mall/js/search.js}" type="text/javascript"></script>
	<script th:src="@{/admin/plugins/sweetalert/sweetalert.min.js}"></script>
	<script th:src="@{/mall/js/bootstrap3.js}"></script>
	<script type="text/javascript">
		$('#saveOrder').click(function() {
			var userAddress = $(".user_address_label").html();
			if (userAddress == '' || userAddress == '无') {
				swal("请填写收货信息", {
					icon : "error",
				});
				return;
			}
			if (userAddress.trim().length < 10) {
				swal("请输入正确的收货信息", {
					icon : "error",
				});
				return;
			}
			window.location.href = '../saveOrder';
		});

		function openUpdateModal() {
			$('#personalInfoModal').modal('show');
		}

		//绑定modal上的保存按钮
		$('#saveButton').click(function() {
			var address = $("#address").val();
			var userId = $("#userId").val();
			var data = {
				"userId" : userId,
				"address" : address
			};
			$.ajax({
				type : 'POST',//方法类型
				url : '/personal/updateInfo',
				contentType : 'application/json',
				data : JSON.stringify(data),
				success : function(result) {
					if (result.resultCode == 200) {
						$('#personalInfoModal').modal('hide');
						window.location.reload();
					} else {
						$('#personalInfoModal').modal('hide');
						swal(result.message, {
							icon : "error",
						});
					}
					;
				},
				error : function() {
					swal('操作失败', {
						icon : "error",
					});
				}
			});
		});
	</script>
</body>
</html>